import React, { useState } from 'react';
import './App.css';
import CoordinateSystem from './components/CoordinateSystem';
import FloatButton from './components/FloatButton';
import MatrixDemo from './components/Matrix/components/MatrixDemo/MatrixDemo';

const App = () => {
  const [activeView, setActiveView] = useState<'coordinate' | 'matrix'>(
    'coordinate',
  );

  return (
    <div className="content">
      <header className="app-header">
        <h1>二维图形变换演示</h1>
        <div className="view-switcher">
          <button
            type="button"
            className={activeView === 'coordinate' ? 'active' : ''}
            onClick={() => setActiveView('coordinate')}
          >
            坐标系
          </button>
          <button
            type="button"
            className={activeView === 'matrix' ? 'active' : ''}
            onClick={() => setActiveView('matrix')}
          >
            矩阵变换
          </button>
        </div>
      </header>

      {activeView === 'coordinate' && (
        <div className="coordinate-view">
          <p>
            基于Canvas
            2D实现的直角坐标系，原点居中，x正向右，y正向上，单位20像素
          </p>
          <p>按住鼠标拖动可以平移坐标系，使用滚轮可以缩放</p>
          <CoordinateSystem width={800} height={600} unitSize={20} />
          <FloatButton />
        </div>
      )}

      {activeView === 'matrix' && (
        <div className="matrix-view">
          <MatrixDemo />
        </div>
      )}
    </div>
  );
};

export default App;
